<template>
	<view class="container">
		<ul class="mui-table-view" id="tableContent">
			<li class="mui-table-view-cell" v-for="zone in zoneList">
				<div class="lt">
					<h5>{{zone.zone.zoneName}} LV:{{zone.zoneLevel}}</h5>
					<view>地图经验 {{zone.exp}} / {{zone.nextExp}}</view>
					<view>boss进度 {{zone.bossExp}} /100</view>
					<span v-if="zone.hasBoss">{{zone.activeBoss.enemyTeamName}}</span>
					<span v-else>暂无BOSS信息~</span>
				</div>
				<button type="primary" @click="Gofight(zone,0)">战斗</button>
				<button type="warn" @click="Gofight(zone,1)" :disabled="!zone.hasBoss">挑战Boss</button>
				<button type="success" @click="levelUp(zone)" :disabled="!zone.canUpgrade">区域升级</button>
			</li>
		</ul>
	</view>
</template>

<script>
	import {
		getParamsRequestPost
	} from '../../utils/getApi.js'
	export default {
		data() {
			return {
				zoneList: []
			}
		},
		onShow() {
			this.getZoneList()
		},
		methods: {
			getZoneList() {
				const that = this;
				// 获取数据
				uni.getStorage({
					key: 'accessToken',
					success: function(res) {
						getParamsRequestPost("/zone/userZone/userList", {
								session: {
									sid: res.data
								},
							}, true)
							.then(result => {
								that.zoneList = result.data;
							})
							.catch(result => {
								console.log(result);
							})
					},
					fail: function(error) {
						console.log('获取数据失败：', error);
					}
				});
			},
			Gofight(zone, type) {
				uni.navigateTo({
					url: '/pages/Zone/battle?zone=' + zone.zone.id + '&battleType=' + type
				})
			},
			levelUp(zone) {
				const that = this;
				// 获取数据
				uni.getStorage({
					key: 'accessToken',
					success: function(res) {
						getParamsRequestPost("/zone/userZone/upgrade", {
								session: {
									sid: res.data
								},
								zone: {
									id: zone.id
								}
							}, true)
							.then(result => {
								that.getZoneList()
								that.$api.msg(`区域已升级`);
								console.log('result：', result);
							})
							.catch(result => {
								console.log(result);
							})
					},
					fail: function(error) {
						console.log('获取数据失败：', error);
					}
				});
			}
		},
	}
</script>

<style lang='scss'>
	.container {
		width: 100%;
		display: block;
		margin-top: 20rpx;
	}

	.mui-table-view-cell {
		width: 100%;
		height: 240rpx;
		display: block;
		padding: 15rpx 25rpx;
		border-bottom: 1px solid #ccc;
	}

	ul,
	li {
		margin: 0%;
		padding: 0;
		list-style: none;
	}

	li {
		height: 238rpx !important;
	}

	H5 {
		font-size: 40rpx;
		margin-bottom: 20rpx;
	}

	.lt {
		width: 68%;
		height: 170rpx;
		float: left
	}

	button {
		width: 200rpx;
		float: right;
		margin-right: 40rpx;
	}

	uni-button {
		height: 70rpx;
		line-height: 70rpx;
		margin-bottom: 10rpx;
	}
</style>